<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 引入Vue -->
  <script src="../js/vue.js"></script>
  <title>收集表单数据</title>
  <style>

  </style>
</head>

<body>
  <!-- 
    Vue收集表单数据:
      1.<input type="text" />,则v-model收集的是value值,用户输入的就是value值
      2.<input type="radio" />,则v-model收集的是value值,且要给标签配置value值
      3.<input type="checkbox" />
        3.1.没有配置input的value属性,那就收集checked(勾选or未勾选,布尔值)
        3.2.配置input的value属性:
          3.2.1.v-model的初始值是非数组,那么收集的及时checked(勾选or未勾选,布尔值)
          3.2.2.v-model的初始值是数组,那么收集的就是value组成的数组
      备注:v-model的三个修饰符:
            lazy:失去焦点再收集数据
            number:输入字符串转为有效数字
            trim:输入首尾空格过滤
   -->
  <!-- 新建一个容器 -->
  <div id="root">
    <form action="">
      <!-- 
        v-model.trim:去掉首尾空格空格
       -->
      <label for="username">账号:</label>
      <input type="text" placeholder="请输入账号" id="username" v-model.trim="userInfo.account">
      <br>

      <label for="password">密码:</label>
      <input type="password" name="" placeholder="请输入密码" id="password" v-model="userInfo.password">
      <br>

      <!-- 
        1.v-model.number:Vue实例接收到这个值的数据类型int类型
        2.type="number": 该input输入框只能输入数字
       -->
      <label for="age">年龄:</label>
      <input type="number" placeholder="请输入年龄" v-model.number="userInfo.age">
      <br>

      性别:
      <input type="radio" name="sex" value="2" v-model="userInfo.sex" id="NaN" checked="checked"><label
        for="NaN">未知</label>
      <input type="radio" name="sex" value="1" v-model="userInfo.sex" id="man"><label for="man">男</label>
      <input type="radio" name="sex" value="0" v-model="userInfo.sex" id="women"><label for="women">女</label>
      <br>

      爱好:
      <input type="checkbox" name="hobby" value="smoke" v-model="userInfo.hobby" id="smoke" checked="checked"><label
        for="smoke">抽烟</label>
      <input type="checkbox" name="hobby" value="tipsiness" v-model="userInfo.hobby" id="tipsiness"><label
        for="tipsiness">喝酒</label>
      <input type="checkbox" name="hobby" value="footbath" v-model="userInfo.hobby" id="footbath"><label
        for="footbath">洗脚</label>
      <br>

      所属校区:
      <select name="" id="" v-model="userInfo.schoolBlock">
        <option value="0" selected>请选择校区</option>
        <option value="xiLi">西丽湖校区</option>
        <option value="guanLong">官龙山校区</option>
        <option value="liuXian">留仙洞校区</option>
      </select>
      <br>

      <!-- 
        v-model.lazy="":失去焦点时再收集到Vue实例立面
       -->
      <label for="other">其他信息:</label>
      <textarea name="" id="other" cols="30" rows="10" v-model.lazy="userInfo.other"></textarea>
      <br>

      <input type="checkbox" name="" id="message" v-model="userInfo.message">
      <label for="message">
        阅读并接收
        <a href="#">《用户协议》</a>
      </label>
      <br>

      <button @click.prevent="submit">提交</button>

    </form>
  </div>

  <script>
    Vue.config.productionTip = false

    // 创建Vue实例
    const vm = new Vue({
      el: '#root',
      data() {
        return {
          userInfo: {
            account: '',
            password: '',
            age: '',
            sex: '2',
            hobby: ['smoke'],
            schoolBlock: '0',
            other: '',
            message: false
          }
        }
      },
      methods: {
        submit() {
          // console.log(this.account)
          // console.log(this.password)
          // console.log(this.sex)
          // console.log(this.hobby)
          // console.log(this.schoolBlock)
          // console.log(this.other)
          // console.log(this.message)

          // console.log(this._data)

          console.log(JSON.stringify(this.userInfo))
        }
      },
    })
  </script>
</body>

</html>